import React from "react";
import {
  useParams,
  useSearchParams,
  useLocation,
  useNavigate,
} from "react-router-dom";
export default function Page1() {
  let params = useParams();
  let [searchParams, setSearchParams] = useSearchParams();
  console.log(params);
  console.log(searchParams.get("name")); //类似proxy的取值方法
  // setTimeout(() => {
  //   setSearchParams({
  //     name: "张三",
  //     age: 18,
  //   });
  // }, 2000);
  // console.log(useLocation());
  /**
   * useLocation返回值
   * hash: "";
   * key: "qrjio58f";
   * pathname: "/page3/3";
   * search: "?name=%E5%BC%A0%E4%B8%89&age=18";
   * state: null;//不在url上 跳转时传递的参数
   */

  const nav = useNavigate();
  //第二个参数，是传递的state
  const goRouter = () => {
    nav("/router?name=张三&age=18", {
      state: {
        reload: true,
      },
    });
  };
  return (
    <div>
      <h1>Page 3</h1>
      <p>This is the third page</p>
      <button onClick={goRouter}>跳转到router页面</button>
    </div>
  );
}
